
<template>
  <el-dialog
    title="角色权限配置"
    :visible.sync="show"
    width="600px"
    center
  >
    <div class="content">
      <tree-box
        ref="treeSelector"
        v-model="selectedNode"
        :data="treeData"
        show-checkbox
        title="权限树"
        :render-content="renderContent"
        placeholder=""
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="saveDoc">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getPermissionTree, addRolePermission, getRolePermissionList } from '@/api/permissionManage'
import TreeBox from '@/components/TreeBox'
export default {
  name: 'EditRoleMenu',
  components: {
    TreeBox
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    optType: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selectedNode: null,
      treeData: []
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
        this.fileList = []
      }
    }
  },
  watch: {
    data: {
      handler(newData, oldData) {
        // if (newData.id) {
        //   this.getDocDetail(newData.id)
        //   Object.keys(this.form).forEach(key => {
        //     this.form[key] = newData[key]
        //   })
        // }
      },
      deep: true,
      immediate: true
    },
    showModal: {
      handler(newData, oldData) {
        // if (newData.id) {
        //   this.getDocDetail(newData.id)
        //   Object.keys(this.form).forEach(key => {
        //     this.form[key] = newData[key]
        //   })
        // }
        if (this.data.id) {
          getRolePermissionList({ roleId: this.data.id }).then(res => {
            if (res.data && res.data.length > 0) {
              const roleData = res.data.filter(item => !item.isHalfChecked).map(item => {
                return {
                  id: item.permissionId
                }
              })
              this.$refs.treeSelector.setCheckedNodes(roleData)
            } else {
              this.$refs.treeSelector.setCheckedNodes([])
            }
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class='custom-tree-node'>
          <span>{node.data.data.title}</span>
        </span>)
    },
    getMenus() {
      getPermissionTree().then(res => {
        const { nodes } = res.data || {}
        if (nodes && nodes.length > 0) {
          this.treeData = nodes
        }
      })
    },
    saveDoc() {
      const parentArr = this.$refs.treeSelector.getHalfCheckedNodes().map(item => {
        item.isHalfChecked = true
        return item
      })
      const childArr = this.$refs.treeSelector.getCheckedNodes()
      const nodes = childArr.concat(parentArr)
      if (nodes.length === 0) {
        this.$message.error('请选择权限菜单')
        return
      }

      const params = {
        lstRolePermission: nodes.map(item => {
          return {
            permissionId: item.id,
            parentId: item.parentId,
            roleId: this.data.id,
            isHalfChecked: item.isHalfChecked
          }
        })
      }
      addRolePermission(params).then(res => {
        if (res.code === '0001') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.show = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height: 500px;
}
</style>
